<template>
     <div class="home">
          <el-row :gutter="20">
               <el-col :span="8">
                    <el-card shadow="hover">
                         <div class="headPortrait">
                              <img class="w150px h150px b-r-50%" src="@/assets/img/head.jpg" />
                              <div class="userInfo">
                                   <p class="font-size-20px">
                                        Admin
                                   </p>
                                   <p>超级管理员</p>
                              </div>
                         </div>
                         <div class="timePlace">
                              <p>
                                   上次登陆时间
                                   <span>2024-06-25</span>
                              </p>
                              <p>
                                   上次登陆地点
                                   <span>广州</span>
                              </p>
                         </div>
                    </el-card>

                    <el-card class="overflow-hidden" shadow="hover" >
                         <el-table class="tableInfo" :data="courseData" style="width: 100%" >
                              <el-table-column prop="course" label="课程" width="100px" />
                              <el-table-column prop="todayBuy" label="今日购买"  />
                              <el-table-column prop="monthBuy" label="本月购买" />
                              <el-table-column prop="address" label="总计" >
                                   <template #default="{row}">
                                        {{ row.todayBuy + row.monthBuy }}
                                   </template>
                              </el-table-column>
                         </el-table>
                    </el-card>
               </el-col>
               <el-col :span="16">
                    <div class="homeHeader flex flex-wrap justify-between">
                         <el-card 
                              v-for="item in homeHeaderInfo" 
                              :key="item.id" 
                              class="w32% p-0 mb-10px"
                         >
                              <component :is="item.icon" class="h60px" :color="item.color"></component>
                              <div class="record">
                                   <span class="font-size-30px">{{ item.value }}</span>
                                   <p class="font-size-14px c-gray"> {{ item.name }} </p>
                              </div>
                         </el-card>
                    </div>
                    <el-card class="h260px">
                         <div ref="lineChart" class="w100% h100%"></div>
                    </el-card>
               </el-col>
          </el-row>
     </div>
</template>

<script setup>
import { ref } from 'vue'
import { getHomeInfo, getHomeHeader, getChartInfo} from '@/api/Home.js'
import * as echarts from 'echarts'
onMounted(()=>{
     gainCourse()
     gainHomeHeader()
})
//获取表格数据
const courseData = ref([])
//获取表格数据
const gainCourse = async ()=>{
     getHomeInfo().then(res=>{
          console.log(res)
          courseData.value = res.data.data
     })
}
//获取home页面头部信息
const homeHeaderInfo = ref([])
const gainHomeHeader = async()=>{
     getHomeHeader().then(res=>{
          homeHeaderInfo.value = res.data.data
     })
}
//获取折现图信息
// const chartInfo = ref([])
// const gainChartInfo = async()=>{
//      getChartInfo().then(res=>{
//           console.log(res)
//           chartInfo.value = res.data.data
//      })
// }
//折线图
// const lineChart = ref()
// const myChart = echarts.init(lineChart);
// const  lineOption = ref({
//      xAxis: {
//           data: ['2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
//      },
//      series: [
//           {
//                data: [10, 22, 28, 43, 49],
//                type: 'line',
//                stack: 'x'
//           },
//           {
//                data: [5, 4, 3, 5, 10],
//                type: 'line',
//                stack: 'x'
//           }
//      ]
// })
</script>

<style scoped lang="scss">
.headPortrait {
     display: flex;
     padding-bottom: 20px;
     border-bottom: 1px solid gray;
     img {
          border-radius: 50%;
     }
     .userInfo {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
          position: relative
     }
}
.timePlace {
     p {
          line-height: 30px;
          font-size: 14px;
          color: #999;
          span {
               color: #666;
               margin-left: 60px;
          }
     }
}
.tableInfo{
     width: 100%;
     font-size: 12px;
     height: 180px;
     overflow-y: auto;
}
.homeHeader{
     height: 60px;
     :deep(.el-card__body) {
          padding: 0;
          display: flex;
     }
}
.record{
     width: 100%;
     display:flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
</style>